Shadows এবং Real-time Lighting গাইড ও নোট

Shadows (ছায়া) এবং Real-time Lighting (রিয়েল-টাইম আলোকসজ্জা) হল 3D গ্রাফিক্সের দুটি গুরুত্বপূর্ণ উপাদান যা দৃশ্যের বাস্তবতা এবং গভীরতা বৃদ্ধি করতে সাহায্য করে। BabylonJS এর মাধ্যমে আপনি সিমুলেটেড শেডো এবং আলোকসজ্জা ব্যবহার করে 3D দৃশ্যগুলোকে আরও জীবন্ত এবং ইন্টারঅ্যাক্টিভ করতে পারেন। এই গাইডে আমরা দেখব কীভাবে Shadows এবং Real-time Lighting তৈরি করা যায়।

১. Shadows (ছায়া)

Shadows কী?

Shadows হল আলোর অবতরণ এবং অবজেক্টের মধ্যে বাধা সৃষ্টি করে একটি দৃশ্যের অংশ হিসেবে ছায়া তৈরি করা। 3D দৃশ্যে ছায়া আলোর প্রভাবে তৈরি হয় এবং এটি দৃশ্যকে আরো বাস্তবসম্মত ও ডাইনামিক করে তোলে। BabylonJS এ, আপনি বিভিন্ন ধরনের শেডো তৈরি করতে পারেন যেমন shadow maps এবং soft shadows।

Shadows যোগ করা:

উদাহরণ:

// canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");

// BabylonJS এর ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);

// একটি নতুন দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);

// ক্যামেরা তৈরি করা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

// আলোর উৎস তৈরি করা
var light = new BABYLON.DirectionalLight("light1", BABYLON.Vector3.Down(), scene);

// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

// ছায়া তৈরি করার জন্য ShadowGenerator ব্যবহার করা
var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
shadowGenerator.addShadowCaster(box);

// বক্সের জন্য একটি ম্যাটেরিয়াল তৈরি করা
var material = new BABYLON.StandardMaterial("boxMaterial", scene);
material.diffuseColor = new BABYLON.Color3(1, 0, 0);  // রেড
box.material = material;

// একটি গ্রাউন্ড তৈরি করা
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
ground.receiveShadows = true;

// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
    scene.render();
});

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

কোডের ব্যাখ্যা:

• ShadowGenerator: এটি একটি ক্লাস যা আলোর উৎস থেকে ছায়া তৈরি করার কাজ করে। এখানে 1024 হচ্ছে শ্যাডো মানচিত্রের রেজোলিউশন।
• addShadowCaster: এই ফাংশনটি দিয়ে কোনো অবজেক্টকে "shadow caster" হিসাবে নির্ধারণ করা হয়, অর্থাৎ এটি ছায়া তৈরি করবে।
• receiveShadows: ground অবজেক্টের জন্য এই অপশনটি True করা হয়েছে, যাতে এটি ছায়া গ্রহণ করতে পারে।

Shadows এর বৈশিষ্ট্য:

• Shadow Maps: আপনি সিম্পল শ্যাডো ম্যাপস তৈরি করতে পারেন, যেখানে লাইটের দিক থেকে তৈরি হওয়া ছায়াগুলি 2D ম্যাপে রেন্ডার হয়।
• Soft Shadows: এই শ্যাডোগুলোর প্রান্ত স্পষ্ট না হয়ে মোলায়েম থাকে, যা একটি নরম আলোর প্রভাব সৃষ্টি করে।

২. Real-time Lighting (রিয়েল-টাইম আলোকসজ্জা)

Real-time Lighting কি?

Real-time Lighting হলো একটি প্রক্রিয়া যেখানে 3D দৃশ্যে আলোর উৎসগুলোর প্রভাব সরাসরি এবং অতি দ্রুত রেন্ডার হয়, যা ব্যবহারকারী যেভাবে দৃশ্যের সাথে ইন্টারঅ্যাক্ট করবে সেভাবে আলো পরিবর্তন হতে থাকে। এটি গেম বা ইন্টারঅ্যাকটিভ অ্যাপ্লিকেশনের জন্য খুবই গুরুত্বপূর্ণ, কারণ এতে দৃশ্যের রিয়েল-টাইম রেন্ডারিং সম্পাদিত হয়।

Real-time Lighting যোগ করা:

উদাহরণ:

// canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");

// BabylonJS এর ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);

// একটি নতুন দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);

// ক্যামেরা তৈরি করা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

// একটি Directional Light তৈরি করা (রিয়েল-টাইম আলো)
var light = new BABYLON.DirectionalLight("light1", BABYLON.Vector3.Down(), scene);

// আলোর রঙ এবং শক্তি নির্ধারণ করা
light.diffuse = new BABYLON.Color3(1, 1, 0);  // হলুদ আলো
light.specular = new BABYLON.Color3(1, 1, 1); // সাদা স্পেকুলার
light.intensity = 0.7;  // আলো শক্তি

// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

// বক্সের জন্য ম্যাটেরিয়াল তৈরি করা
var material = new BABYLON.StandardMaterial("boxMaterial", scene);
material.diffuseColor = new BABYLON.Color3(1, 0, 0);  // রেড
box.material = material;

// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
    scene.render();
});

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

কোডের ব্যাখ্যা:

• DirectionalLight: একটি দিকনির্দেশিত আলো তৈরি করা হয়েছে, যা দৃশ্যের সমগ্র অংশে আলো প্রবাহিত করবে।
• light.intensity: আলোর শক্তি বা উজ্জ্বলতা নিয়ন্ত্রণ করে। এটি রিয়েল-টাইমে পরিবর্তিত হতে পারে, যেমন গেমে সময় পরিবর্তন হলে বা ব্যবহারকারী ইন্টারঅ্যাক্ট করলে।
• light.diffuse & specular: আলোর রঙ এবং প্রতিফলন নিয়ন্ত্রণ করে।

Real-time Lighting এর বৈশিষ্ট্য:

• Dynamic Lighting: রিয়েল-টাইম আলো পরিবর্তনশীল, যা আপনার 3D দৃশ্যকে আরো ইন্টারঅ্যাকটিভ এবং ডাইনামিক করে তোলে।
• Light Animation: আপনি আলোর উৎসকে অ্যানিমেট করতে পারেন, যেমন সূর্য ডুবে যাচ্ছে বা একটি বাতি জ্বলছে।

৩. Shadows এবং Lighting একত্রে ব্যবহার

Shadows এবং Real-time Lighting একত্রে ব্যবহারের মাধ্যমে আপনি বাস্তবসম্মত দৃশ্য তৈরি করতে পারেন, যেখানে আলোর প্রভাব এবং ছায়া একে অপরের সাথে ইন্টারঅ্যাক্ট করবে। এই উদাহরণে, আমরা একটি দৃশ্যে Directional Light এবং ShadowGenerator ব্যবহার করব, যাতে বক্সটির ছায়া দৃশ্যমান হয়।

উদাহরণ:

// canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");

// BabylonJS এর ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);

// একটি নতুন দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);

// ক্যামেরা তৈরি করা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

// Directional Light তৈরি করা
var light = new BABYLON.DirectionalLight("light1", BABYLON.Vector3.Down(), scene);

// ShadowGenerator তৈরি করা
var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);

// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
shadowGenerator.addShadowCaster(box);

// একটি গ্রাউন্ড তৈরি করা এবং শ্যাডো গ্রহণ করা
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
ground.receiveShadows = true;

// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
    scene.render();
});

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

কোডের ব্যাখ্যা:

• Directional Light & Shadows: আমরা একটি DirectionalLight ব্যবহার করেছি এবং তার সাথে ShadowGenerator যোগ করেছি। এটি শ্যাডো ম্যাপ তৈরি করে এবং বক্সটির ছায়া সিমুলেট করে।
• Ground: একটি গ্রাউন্ড তৈরি করা হয়েছে যেটি ছায়া গ্রহণ করবে।

সারাংশ

• Shadows: ছায়া 3D দৃশ্যে আলোর প্রতিফলন তৈরি করে এবং একটি দৃশ্যের গভীরতা

এবং বাস্তবতা বৃদ্ধি করে।

• Real-time Lighting: এটি 3D দৃশ্যে আলোর উৎসের প্রভাব রিয়েল-টাইমে পরিবর্তন করে, যা একটি ডাইনামিক এবং ইন্টারঅ্যাকটিভ পরিবেশ তৈরি করে।
• BabylonJS ব্যবহার করে আপনি এই দুটি উপাদান সহজেই যোগ করতে পারেন এবং আপনার 3D প্রজেক্টে আলোর প্রভাব এবং ছায়া বাস্তবসম্মতভাবে প্রয়োগ করতে পারেন।

Shadows এবং Real-time Lighting এর সঠিক ব্যবহারের মাধ্যমে আপনি আপনার 3D দৃশ্যকে আরও বাস্তবসম্মত এবং আকর্ষণীয় করতে পারবেন।